<template>
    <div class="madp-news">
        <basic-container>
            <el-form class="madp-news-search" label-width="120px" inline>
                <el-form-item label="分组:">
                    <el-select v-model="activeGroupId">
                        <el-option v-for="item in options" :key="item.groupId" :value="item.groupId" :label="item.groupName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标题:">
                    <el-input v-model.trim="searchT" placeholder="请输入标题" maxlength="50"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList()">搜索</el-button>
                    <el-button @click="clearInputFn">清空</el-button>
                </el-form-item>
            </el-form>
            <div class="madp-news-content">
                <div class="madp-news-content-group">
                    <div class="madp-news-content-group-btns">
                        <el-button v-if="permissions.cp_news_add" type="primary" @click="handleAddNews">新建资讯</el-button>
                        <el-button v-if="permissions.cp_news_add" type="text" icon="el-icon-plus" size="medium" @click="handleAddGroup">添加分组</el-button>
                    </div>
                    <div class="madp-news-content-group-list" v-show="groupData.length > 0">
                        <el-tree
                            ref="tree"
                            class="filter-tree"
                            :data="groupData"
                            :props="defaultProps"
                            node-key="groupId"
                            :current-node-key="1000"
                            :highlight-current="true"
                            :expand-on-click-node="false"
                            :default-expand-all="false"
                            @node-click="handleNodeClick"
                        >
                            <div class="custom-tree-node" slot-scope="{ data }">
                                <span>{{ data.groupName }}</span>
                                <el-popover placement="right" trigger="click" v-if="(permissions.cp_news_edit || permissions.cp_news_del) && !data.system">
                                    <div class="madp-sort-list-display">
                                        <el-button v-if="permissions.cp_news_edit" type="text" class="madp-sort-list-display-btn" @click="editGroup(data)">
                                            <i class="el-icon-edit"></i>编辑
                                        </el-button>
                                        <el-button v-if="permissions.cp_news_del" class="madp-sort-list-display-delete" type="text" @click="deleteGroup(data)">
                                            <i class="el-icon-delete"></i>删除
                                        </el-button>
                                    </div>
                                    <i slot="reference" class="el-icon-s-operation"></i>
                                </el-popover>
                            </div>
                        </el-tree>
                    </div>
                </div>
                <div class="madp-news-content-list">
                    <tableNode ref="table1" :parentId.sync="parentId" :tableType="2" :activeGroupId="activeGroupId" :searchT="searchT" @handleView="handleView" @handleUpdate="handleUpdate" />
                    <tableNode
                        ref="table2"
                        :parentId.sync="parentId"
                        :activeGroupId="activeGroupId"
                        :searchT="searchT"
                        @handleEdit="handleEdit"
                        @handleView="handleView"
                        @handleUpdate="handleUpdate"
                        :tableType="1"
                    />
                </div>
            </div>
        </basic-container>
        <add-group :form="addGroupForm" :addDialogShow="dialogShow == 'group'" :dialogTitle="dialogTitle" @dialogHandleCancel="dialogHandleCancel" @dialogHandleSubmit="groupDialogHandleSubmit" />
        <add-news
            :options="groupData"
            :propsForm="addNewsForm"
            :addDialogShow="dialogShow == 'news'"
            :dialogTitle="dialogTitle"
            @dialogHandleCancel="dialogHandleCancel"
            @handleUpdate="handleUpdate"
        />
        <news-detail :dialogTitle="dialogTitle" :addDialogShow="dialogShow == 'detail'" :parentId="parentId" :info="addNewsForm" @dialogHandleCancel="dialogHandleCancel" />
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import addGroup from './add-group.vue';
import addNews from './add-news.vue';
import tableNode from './table.vue';
import newsDetail from '../paper/detail.vue';
import newsApi from '@/api/store/news.js';
export default {
    components: {
        addGroup,
        addNews,
        tableNode,
        newsDetail
    },
    data() {
        return {
            // 搜索资讯内容
            searchT: '',
            // 分组树数据
            groupData: [],
            // 分组树props
            defaultProps: {
                children: 'x',
                label: 'groupName'
            },
            // 当前选中分组id
            activeGroupId: 0,
            // 新增分组表单
            addGroupForm: {
                groupName: '',
                children: []
            },
            // 新增资讯表单
            addNewsForm: {},
            // 弹窗标题
            dialogTitle: '',
            // 弹窗开关
            dialogShow: false,
            // 分组下拉数据
            options: [],
            // 查询条件
            parentId: 1000
        };
    },
    computed: {
        ...mapGetters(['permissions'])
    },
    created() {
        this.getMediumGroupList();
    },
    methods: {
        // 搜索分组下资讯
        getList(data) {
            this.$refs.table1.getList(data);
            this.$refs.table2.getList(data);
        },
        // 清空搜索内容
        clearInputFn() {
            this.searchT = '';
            this.getList();
        },
        // 新增资讯
        handleAddNews() {
            this.dialogTitle = '新建资讯';
            this.addNewsForm = {};
            this.dialogShow = 'news';
        },
        // 新增分组
        handleAddGroup() {
            this.dialogTitle = '新建分组';
            this.addGroupForm = {
                groupName: '',
                children: []
            };
            this.dialogShow = 'group';
        },
        // 点击分组树节点
        handleNodeClick(data) {
            let { groupId } = data;
            if (this.activeGroupId != groupId) {
                this.activeGroupId = groupId;
                this.parentId = groupId;
                this.initOptions();
            }
        },
        // 侧边栏分组列表显示
        getMediumGroupList() {
            newsApi.newsGroupTree().then((res) => {
                if (res.data.code != 0) return;
                this.groupData = res.data.data;
                this.activeGroupId = this.groupData[0].groupId;
                this.parentId = this.activeGroupId;
                this.initOptions();
            });
        },
        // 更新分组下拉数据
        initOptions() {
            let res = this.groupData.filter((i) => {
                return i.groupId == this.activeGroupId;
            })[0].children;
            if (res.length > 1) {
                res = [{ groupName: '全部', groupId: this.activeGroupId }, ...res];
            } else if (res.length == 1) {
                this.activeGroupId = res[0].groupId;
                res = [{ groupName: '全部', groupId: this.activeGroupId }];
            } else {
                res = [{ groupName: '全部', groupId: this.activeGroupId }];
            }
            this.options = res;
            this.$nextTick(() => {
                this.getList();
            });
        },
        // 编辑分组
        editGroup(data) {
            this.dialogShow = 'group';
            this.addGroupForm = JSON.parse(JSON.stringify(data));
            if (!data.children) this.addGroupForm.children = [];
            this.dialogTitle = '编辑分组';
        },
        // 删除分组
        deleteGroup(data) {
            this.$confirm('是否确认删除分组', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    newsApi.delNewsGroup(data.groupId).then((res) => {
                        if (res.data && res.data.code == 0) {
                            this.getMediumGroupList();
                            this.$message.success('删除成功!');
                        }
                    });
                })
                .catch(() => {});
        },
        // 弹窗点击关闭
        dialogHandleCancel() {
            this.dialogShow = false;
        },
        // 分组弹窗点击确定
        groupDialogHandleSubmit(data) {
            data.children = data.children.map((i, index) => {
                let { groupId, groupName } = i,
                    obj = {
                        groupName,
                        order: index
                    };
                if (groupId) obj.groupId = groupId;
                return obj;
            });
            delete data.childrenName;
            if (data.needConfirm) {
                this.$confirm('删除的子分组中包含已有的子分组，是否确认删除', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        delete data.needConfirm;
                        this.addAndEditGroup(data);
                    })
                    .catch(() => {
                        return;
                    });
            } else {
                this.addAndEditGroup(data);
            }
        },
        // 资讯更新
        addAndEditGroup(data) {
            if (this.dialogTitle == '新建分组') {
                newsApi.addNewsGroup(data).then((res) => {
                    if (res.data.code != 0) return;
                    this.$message({
                        type: 'success',
                        message: '新增成功'
                    });
                    this.dialogHandleCancel();
                    this.getMediumGroupList();
                });
            } else {
                newsApi.editNewsGroup(data).then((res) => {
                    if (res.data.code != 0) return;
                    this.$message({
                        type: 'success',
                        message: '编辑成功'
                    });
                    this.dialogHandleCancel();
                    this.getMediumGroupList();
                });
            }
        },
        // 资讯弹窗点击确定
        handleUpdate() {
            this.$refs.table1.getList(1);
            this.$refs.table2.getList(1);
            this.dialogShow = false;
        },
        handleEdit(data) {
            this.addNewsForm = JSON.parse(JSON.stringify(data));
            this.dialogTitle = '编辑资讯';
            this.dialogShow = 'news';
        },
        handleView(data) {
            if ([3000, 2000, 1000].includes(this.parentId)) {
                this.addNewsForm = data;
                this.dialogTitle = '查看资讯';
                this.dialogShow = 'detail';
            } else {
                this.addNewsForm = {
                    ...JSON.parse(JSON.stringify(data)),
                    onlyRead: true
                };
                this.dialogTitle = '查看资讯';
                this.dialogShow = 'news';
            }
        }
    }
};
</script>
<style scoped lang="scss">
.madp-news {
    min-width: 1200px;
    &-search {
        text-align: right;
    }
    &-content {
        display: flex;
        justify-content: space-between;
        &-group {
            overflow: auto;
            position: relative;
            width: 12rem;
            &-btns {
                text-align: center;
                position: fixed;
                z-index: 1;
                width: 12rem;
                background: #fff;
                height: 5.6rem;
                padding: 1rem 0;
                box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
                .el-button {
                    width: 80%;
                    margin-bottom: 5px;
                }
                .el-button + .el-button {
                    margin-left: 0;
                }
            }
            &-list {
                margin-top: 6rem;
                position: fixed;
                z-index: 1;
                width: 12rem;
                .custom-tree-node {
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    padding-right: 20px;
                }
            }
        }
        &-group ::-webkit-scrollbar {
            display: none;
        }
        &-list {
            width: calc(100% - 13rem);
            &-visible {
                .bold {
                    font-weight: bold;
                }
            }
        }
    }
}
.madp-content-T {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
</style>
